<template>
	<div class="page">
		<Head />
		<div class="mainBody">
			<div class="slotGames routerView fish">
				<div class="flexContainer">
					<div class="container">
						<div class="banner"><img src="../assets/img/fish_banner.0a2348e7.png" alt=""></div>
						<div class="bg fish">
							<div class="main">
								<div class="providerList">
									<ul >
										<li @click="tab(0)" :class="cur == 0?'actived':''"><img  src="../assets/img/fish_mgfish_tab_nor.png"
												width="100%" height="100%" alt="" class="nor"><img 
												src="../assets/img/fish_mgfish_tab_sel.png"
												width="100%" height="100%" alt="" class="sel"></li>
										<li @click="tab(1)" :class="cur == 1?'actived':''"><img src="../assets/img/fish_jdbfish_tab_nor.png"
												width="100%" height="100%" alt="" class="nor"><img 
												src="../assets/img/fish_jdbfish_tab_sel.png"
												width="100%" height="100%" alt="" class="sel"></li>
										<li @click="tab(2)" :class="cur == 2?'actived':''"><img src="../assets/img/fish_bbinfish_tab_nor.png"
												width="100%" height="100%" alt="" class="nor"><img 
												src="../assets/img/fish_bbinfish_tab_sel.png"
												width="100%" height="100%" alt="" class="sel"></li>
									</ul>
								</div>
								<div class="games">
									<el-main v-loading="Loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
										<ul v-if="cur == 0">
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/sfg_wdfuwafishing_icon_square_600x600_en.png" class="el-image__inner">
													</div>
												</div>
												<div class="name"> WD FuWa Fishing </div>
												<div class="cover"><span >Bắt đầu chơi</span></div>
											</li>
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/sfg_wdgoldblastfishing_icon_square_600x600_en.png" class="el-image__inner"></div>
												</div>
												<div class="name"> WD Gold Blast Fishing </div>
												<div class="cover"><span >Bắt đầu chơi </span></div>
											</li>
										</ul>
										<ul v-if="cur == 1">
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/7001.jpg" class="el-image__inner">
													</div>
												</div>
												<div class="name"> WD FuWa Fishing </div>
												<div class="cover"><span >Bắt đầu chơi</span></div>
											</li>
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/7002.jpg" class="el-image__inner"></div>
												</div>
												<div class="name"> WD Gold Blast Fishing </div>
												<div class="cover"><span >Bắt đầu chơi </span></div>
											</li>
										</ul>
										<ul v-if="cur == 2">
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/sfg_wdfuwafishing_icon_square_600x600_en.png" class="el-image__inner">
													</div>
												</div>
												<div class="name"> WD FuWa Fishing </div>
												<div class="cover"><span >Bắt đầu chơi</span></div>
											</li>
											<li >
												<div class="img">
													<div class="el-image"><img src="../assets/img/sfg_wdgoldblastfishing_icon_square_600x600_en.png" class="el-image__inner"></div>
												</div>
												<div class="name"> WD Gold Blast Fishing </div>
												<div class="cover"><span >Bắt đầu chơi </span></div>
											</li>
										</ul>
									</el-main>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<Foot />
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from '@/components/Foot.vue'
	export default {
		name: 'Home',
		components: {
			Head,
			Foot
		},
		data() {
			return {
				cur:0,
				Loading: false
			};
		},
		methods: {
			tab(i){
				this.Loading = true
				
				setTimeout(() => {
				// 加载状态结束
				this.Loading = false;
				this.cur = i
				}, 2000);
			}
		}
	}
</script>
